<template>
    <video-player 
        ref="players"
        class="dialog-video"
        :src="videoSrc"
        :options="playerOptions"
        :volume="0.6"
        @mounted="videoMounted"
        @loadedmetadata="videoLoadedmetadata"
        @timeupdate="updateKonva(player?.currentTime())"
        @pause="pauseVideo"
        @resize="videoLoadedmetadata"
    />
</template>
<script setup lang="ts">
    interface T_Props {
        videoSrc: string,
    }
    const props = defineProps<T_Props>()

    const $emit = defineEmits([
        'timeupdateKonva',
    ])

    const players = ref()
    const player = shallowRef()
  
    const videoScale = 16/9

    const videoRender = {
        width: 0,
        height: 0,
    }

    // 视频播放器配置
    let playerOptions = ref({
        // height: 400,
        // width: document.documentElement.clientWidth, //播放器宽度
        //playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: 'any', // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controls: true,
        controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
        },
    })
    const videoMounted = (payload: any) => {
        player.value = payload.player
        // const frameRate = player.value.el().duration / player.value.el().seekable.end(0)
    }

    function updateKonva(currentTime: number) {
        $emit(
            'timeupdateKonva', 
            { playTime: currentTime, playerSize: videoRender }
        )
    }
    function pauseVideo () {
        player.value && player.value.pause()
    }
    async function videoLoadedmetadata() {   
        return await nextTick(() => {
            const wrapScale = player.value.el().offsetWidth / player.value.el().offsetHeight
            if(wrapScale > videoScale) { // 横屏
                videoRender.width  = player.value.el().offsetHeight * videoScale
                videoRender.height = player.value.el().offsetHeight
            } else {
                videoRender.width  = player.value.el().offsetWidth
                videoRender.height = player.value.el().offsetWidth / videoScale 
            }
            return videoRender
        })
    }
    defineExpose({ pauseVideo, videoLoadedmetadata})

</script>
<style lang="scss">
.el-dialog {
    .video-js .vjs-control-bar {
        bottom: -3.1em;
    }
    .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{
        opacity: 1;
    }
    .video-js .vjs-fullscreen-control {
        opacity: 0;
    }
}
</style>